<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="system_public::header"></th:block>
</head>
<body>
	<table id="list"></table>
	<div id="addOrUpdateDialog" style="display:none;">
		<form method="post">
			<input type="hidden" name="id">
			<table class="addform">
				<tr>
					<td class="title" colspan="2"></td>
				</tr>
				<tr>
					<td class="label">资源名称</td>
					<td class="input">
						<input type="text" name="name">
					</td>
				</tr>
				<tr>
					<td class="label">所属父节点</td>
					<td class="input">
						<select name="parentid">
							<option value="0">根节点</option>
							<option th:each="n : ${rootList}" th:value="${n.id}" th:text="${n.name}"></option>
						</select>
					</td>
				</tr>
				<tr>
					<td class="label">资源路径</td>
					<td class="input">
						<input type="text" name="url">
					</td>
				</tr>
				<tr>
					<td class="label">资源图片路径</td>
					<td class="input">
						<input type="text" name="imageurl">
						<a href="#" class="easyui-linkbutton" id="selectNavImageButton">选择图片</a>
					</td>
				</tr>
				<tr>
					<td class="label">排序号</td>
					<td class="input">
						<input type="text" name="ordernum">
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div id="imageDialog" style="display:none;width:660px;height:450px;">
		<div class="imagediv" style="margin-left:2px;" data-filename=""></div>
	</div>
	<th:block th:include="system_public::footer"></th:block>
	<th:block th:include="system_public::jsfile"></th:block>
	<script th:inline="none">
	$(function(){
		var $list = $('#list');
		var $addOrUpdateDialog = $('#addOrUpdateDialog');
		var $addOrUpdateDialog_form = $addOrUpdateDialog.children('form');
		var $imageDialog = $("#imageDialog");
		var $imageDialog_imagediv = $imageDialog.find("div.imagediv");
		$list.treegrid({
			title : '系统功能列表',
			fit : true,
			url : pageurl+'/system/webnavresources/index',
			idField : 'id',
			treeField : 'name',
			cls : 'list_padding',
			columns : [[{
				field : 'name',
				title : '系统功能名称',
				width : 200
			},{
				field : 'url',
				title : '系统功能地址',
				width : 300
			},{
				field : 'imageurl',
				title : '图片地址',
				width : 150
			},{
				field : 'ordernum',
				title : '排序号',
				width : 60
			}]],
			toolbar : [{
				text : '刷新列表',
				iconCls : 'icon-reload',
				handler : function() {
					$list.treegrid("reload");
				}
			},'-',{
				text : '增加功能',
				iconCls : 'icon-add',
				handler : function() {
					$addOrUpdateDialog.dialog("open");
					$addOrUpdateDialog_form.find('td.title').text("增加新资源");
					$addOrUpdateDialog_form.attr("action", pageurl+"/system/webnavresources/add");
					$imageDialog_imagediv.attr("data-filename", "");
				}
			},'-',{
				text : '修改功能',
				iconCls : 'icon-edit',
				handler : function() {
					var row = $list.datagrid("getSelected");
					if(row) {
						$addOrUpdateDialog.dialog("open");
						$addOrUpdateDialog_form.find('td.title').text("修改"+row.name+"资源");
						$addOrUpdateDialog_form.attr("action", pageurl+"/system/webnavresources/update");
						$addOrUpdateDialog_form.form("load", row);
						$imageDialog_imagediv.attr("data-filename", row.imageurl);
					} else {
						$.messager.alert('系统提示','请先选择一个资源','info');
					}
				}
			},'-',{
				text : '删除功能',
				iconCls : 'icon-remove',
				handler : function() {
					var row = $list.datagrid("getSelected");
					if(row) {
						$.messager.confirm('删除资源提示','您是否要删除'+row.name+'资源吗?',function(r){
							if(r) {
								$.post(pageurl+'/system/webnavresources/delete',{id:row.id},function(result){
									if(result.success) {
										$list.treegrid("reload");
										$.messager.alert('系统提示','删除成功','info');
									} else {
										$.messager.alert('系统提示',result.message,'warning');
									}
								},'json');
							}
						});
					} else {
						$.messager.alert('系统提示','请先选择一个资源','info');
					}
				}
			}]
		});
		$addOrUpdateDialog.show().dialog({
			title : '导航栏资源',
			iconCls : 'icon-save',
			modal : true,
			closed : true,
			width : 450,
			height : 300,
			buttons : [{
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					$addOrUpdateDialog_form.submit();
				}
			},{
				text : '返回',
				iconCls : 'icon-back',
				handler : function() {
					$addOrUpdateDialog.dialog("close");
				}
			}],
			onClose : function() {
				$addOrUpdateDialog_form.form("reset");
			}
		});
		$addOrUpdateDialog_form.form({
			success : function(data) {
				var obj = $.parseJSON(data);
				if(obj.success) {
					$addOrUpdateDialog.dialog("close");
					$list.treegrid("reload");
				} else {
					alert(obj.message);
				}
			}
		});
		$addOrUpdateDialog_form.find('#selectNavImageButton').click(function(){
			$imageDialog.dialog("open");
		});
		$imageDialog.show().dialog({
			title : '选择导航栏图片',
			iconCls : 'icon-edit',
			modal : true,
			closed : true,
			buttons : [{
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					var $ul = $imageDialog_imagediv.children("ul");
					var $lis = $ul.children("li.selected");
					if($lis.length>0) {
						var $li = $lis.eq(0);
						var filename = $li.children("img").attr("data-filename");
						$addOrUpdateDialog_form.find("input[name=imageurl]").val(filename);
						$imageDialog_imagediv.attr("data-filename", filename);
						$imageDialog.dialog("close");
					} else {
						$.messager.alert('系统提示','请选择一张图片','info');
					}
				}
			},{
				text : '返回',
				iconCls : 'icon-back',
				handler : function() {
					$imageDialog.dialog("close");
				}
			}],
			onOpen : function() {
				var $ul = $("<ul></ul>").addClass("nav1").appendTo($imageDialog_imagediv);
				$.post(pageurl+'/system/webnavresources/get_nav_image_list',function(rows){
					var filename = $imageDialog_imagediv.attr("data-filename");
					$.each(rows, function(index, row){
						var $li = $("<li></li>").appendTo($ul);
						$("<img/>").attr({
							'src' : pageurl+'/navimage/'+row,
							'width' : '48px',
							'height' : '48px',
							'data-filename' : row
						}).appendTo($li);
						$li.hover(function(){
							$li.addClass("over");
						},function(){
							$li.removeClass("over");
						}).click(function(){
							$ul.children("li.selected").removeClass("selected");
							$li.addClass("selected");
						});
						if(filename!=null && filename.length>0 && filename==row) {
							$li.addClass("selected");
						}
					});
				},'json');
			},
			onClose : function() {
				$imageDialog_imagediv.empty();
			}
		});
	});
	</script>
</body>
</html>